<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置背景图片 */
        .background {
            width: 380px;
            height: 340px;
            color: white;
            background: url("../images/popups/detailsPane.png") !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important;
        }

        /* 设置标题头 */
        .title {
            text-align: center;
            font-size: 30px;
            color: white;
        }

        /* 设置内容 */
        .content {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 35px;
            padding-top: 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="background">
        <div class="title"></div>
        <div class="content">
            <video controls id="video" style="width: 100%; height: 100%;"></video>
        </div>
    </div>
    <script src="../customJS/hls.js"></script>
    <script>

        if (Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource('http://ivi.bupt.edu.cn/hls/cctv13.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        }
        // 获取传来的字符串
        function GetParamValue(findParam, defaultValue) {
            var arr = document.location.href.split("?");
            if (arr.length <= 1)
                return defaultValue;
            arr = arr[1].split("&");
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].indexOf(findParam) == 0
                    && arr[i].indexOf("=") == findParam.length) {
                    arr = arr[i].split("=");
                    return arr[1];
                }
            }
            return defaultValue;
        };
    </script>
</body>

</html>